<template>
  <div class="footer">
    <div class="main">
      <div class="left">
        <div class="bt">
          <span class="title-item">首页</span>
          <span class="title-item"> PTE在线练习</span
          ><span class="title-item">CCL在线练习</span>
        </div>
        <div>
          <p class="wz">
            <i class="iconfont icon-zuobiao"></i>
             <span class="pos">301/600 George Street Sydeny 2000</span>
          </p>
          <p class="phone">
            <i class="iconfont icon-dianhua"></i>
            <span>+61 434 033 647</span>
          </p>
          <p class="email">
            <i class="iconfont icon-youxiang1"></i>
           <span class="em">reception@eastongroup.com.au</span>
          </p>
          <p class="bah">网站备案号：冀ICP备2021001469号-1</p>
        </div>
      </div>
      <div class="right">
        <div>
          <p class="tp">微信公众号</p>
          <!-- <img src="@/assets/imgs/course-index_slices/gzh.jpg" alt="" /> -->
          <img src="@/assets/images/footer/gzh.jpg" alt="" />
          <p class="bt">每周更新视频教学</p>
        </div>
        <div>
          <p class="tp">客服咨询</p>
          <img src="@/assets/images/footer/kf.jpg" alt="" />
          <p class="bt">随时解答问题</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
.footer {
  height: 14.9375rem;
  background-color: #1c1f21;
  padding-bottom: 1.25rem;
  margin-top: 10.5rem;
  .main {
    display: flex;
    margin: auto;
    padding-top: 2.5rem;
    box-sizing: border-box;
    width: 75rem;
    height: 100%;
    color: #aaa;
    font-size: 1.125rem;
    font-weight: 400;
    .title-item {
      padding-right: 1.25rem;
    }
    .left {
      flex: 7;
      text-align: left;
      p {
        position: relative;
        margin-bottom: .3125rem;
        font-size: 1rem;
        span{
          margin-left: .625rem;
        }
      }
      .wz {
        cursor: pointer;
        .pos{
          padding-left: .1875rem;
        }
      }
      .phone{
        margin-left: .1875rem;
      }
      .email{
        margin-left: .1875rem;
        .em{
          padding-left: .125rem;
        }
      }
      img{
        vertical-align: middle;
      }
      .bt{
        height: 2.5rem;
      }
      .bah{
        color: #b3b3b3;
        margin-top: 1rem;
        font-size: 1rem;
        opacity: .5;
      }
    }
    .right {
      display: flex;
      justify-content: space-around;
      flex: 3;
      text-align: center;
      img {
        width: 7.5rem;
        height: 7.5rem;
      }
      .tp {
        font-size: 1rem;
        margin-top: 0;
        margin-bottom: 0.625rem;
      }
      .bt {
        margin-top: 0.5rem;
        font-size: 0.875rem;
      }
    }
  }
}
</style>
